<!-- pages/my/index.vue -->
<script setup>
	import { ref } from 'vue'
	import { userInfoApi } from '@/services/user'
	import { onLoad } from '@dcloudio/uni-app'
	import { useUserStore } from '@/stores/user'

	// 用户相关的数据
	const userStore = useUserStore()

	// 用户信息
	const userInfo = ref({})

	// 获取用户信息
	async function getUserInfo() {
		// 调用接口获取用户信息
		const { code, data, message } = await userInfoApi()
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 渲染用户数据
		userInfo.value = data
	}

	// 退出登录
	function onLogoutClick() {
		uni.showModal({
			title: '提示',
			content: '确定退出登录吗？',
			success: function (res) {
				if (res.confirm) {
					// 清除登录状态
					userStore.token = ''
					// 重置 Pinia 的数据
					userStore.openType = 'switchTab'
					userStore.redirectURL = '/pages/index/index'
					// 跳转到登录页
					uni.reLaunch({ url: '/pages/login/index' })
				} else if (res.cancel) {
					console.log('用户点击取消')
				}
			},
		})
	}

	// 获取个人信息
	getUserInfo()
</script>

<template>
	<scroll-page background-color="#F6F7F9">
		<view class="my-page">
			<!-- 用户资料（头像&昵称） -->
			<view class="user-profile">
				<!-- <image class="user-avatar" :src="userInfo.avatar"></image> -->
				<image
					class="user-avatar"
					src="/static/uploads/doctor-avatar.jpg"
				></image>
				<view class="user-info">
					<text class="nickname">{{ userInfo.account }}</text>
					<text class="iconfont icon-edit"></text>
				</view>
			</view>
			<!-- 用户数据 -->
			<view class="user-data">
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{
						userInfo.collectionNumber
					}}</text>
					<text class="data-label">收藏</text>
				</navigator>
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{ userInfo.likeNumber }}</text>
					<text class="data-label">关注</text>
				</navigator>
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{ userInfo.score }}</text>
					<text class="data-label">积分</text>
				</navigator>
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{ userInfo.couponNumber }}</text>
					<text class="data-label">优惠券</text>
				</navigator>
			</view>
			<!-- 问诊医生 -->
			<custom-section
				:custom-style="{ paddingBottom: '20rpx' }"
				title="问诊中"
			>
				<swiper
					class="uni-swiper"
					indicator-active-color="#2CB5A5"
					indicator-color="#EAF8F6"
					indicator-dots
				>
					<swiper-item>
						<view class="doctor-brief">
							<image
								class="doctor-avatar"
								src="/static/uploads/doctor-avatar.jpg"
							/>
							<view class="doctor-info">
								<view class="meta">
									<text class="name">王医生</text>
									<text class="title"
										>内分泌科 | 主任医师</text
									>
								</view>
								<view class="meta">
									<text class="tag">三甲</text>
									<text class="hospital">积水潭医院</text>
								</view>
							</view>
							<navigator
								class="doctor-contcat"
								hover-class="none"
								url=" "
							>
								进入咨询
							</navigator>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="doctor-brief">
							<image
								class="doctor-avatar"
								src="/static/uploads/doctor-avatar.jpg"
							/>
							<view class="doctor-info">
								<view class="meta">
									<text class="name">王医生</text>
									<text class="title"
										>内分泌科 | 主任医师</text
									>
								</view>
								<view class="meta">
									<text class="tag">三甲</text>
									<text class="hospital">积水潭医院</text>
								</view>
							</view>
							<navigator
								class="doctor-contcat"
								hover-class="none"
								url=" "
							>
								进入咨询
							</navigator>
						</view>
					</swiper-item>
				</swiper>
			</custom-section>
			<!-- 药品订单 -->
			<custom-section show-arrow title="药品订单">
				<template #right>
					<navigator hover-class="none" url=" "> 全部订单 </navigator>
				</template>
				<view class="drug-order">
					<navigator hover-class="none" url=" ">
						<uni-badge
							:text="0"
							:offset="[3, 3]"
							absolute="rightTop"
						>
							<image
								src="/static/images/order-status-1.png"
								class="status-icon"
							/>
						</uni-badge>
						<text class="status-label">待付款</text>
					</navigator>
					<navigator hover-class="none" url=" ">
						<uni-badge
							text="2"
							:offset="[3, 3]"
							absolute="rightTop"
						>
							<image
								src="/static/images/order-status-2.png"
								class="status-icon"
							/>
						</uni-badge>
						<text class="status-label">待付款</text>
					</navigator>
					<navigator hover-class="none" url=" ">
						<uni-badge
							:text="0"
							:offset="[3, 3]"
							absolute="rightTop"
						>
							<image
								src="/static/images/order-status-3.png"
								class="status-icon"
							/>
						</uni-badge>
						<text class="status-label">待付款</text>
					</navigator>
					<navigator hover-class="none" url=" ">
						<uni-badge
							:text="0"
							:offset="[3, 3]"
							absolute="rightTop"
						>
							<image
								src="/static/images/order-status-4.png"
								class="status-icon"
							/>
						</uni-badge>
						<text class="status-label">待付款</text>
					</navigator>
				</view>
			</custom-section>
			<!-- 快捷工具 -->
			<custom-section title="快捷工具">
				<uni-list :border="false">
					<uni-list-item
						:border="false"
						title="我的问诊"
						show-arrow
						show-extra-icon
						:extra-icon="{
							customPrefix: 'icon-symbol',
							type: 'icon-symbol-tool-01',
						}"
					/>
					<uni-list-item
						:border="false"
						title="我的处方"
						show-arrow
						show-extra-icon
						:extra-icon="{
							customPrefix: 'icon-symbol',
							type: 'icon-symbol-tool-02',
						}"
					/>
					<uni-list-item
						:border="false"
						title="家庭档案"
						show-arrow
						show-extra-icon
						to="/subpkg_archive/list/index"
						:extra-icon="{
							customPrefix: 'icon-symbol',
							type: 'icon-symbol-tool-03',
						}"
					/>
					<uni-list-item
						:border="false"
						title="地址管理"
						show-arrow
						show-extra-icon
						:extra-icon="{
							customPrefix: 'icon-symbol',
							type: 'icon-symbol-tool-04',
						}"
					/>
					<uni-list-item
						:border="false"
						title="我的评价"
						show-arrow
						show-extra-icon
						:extra-icon="{
							customPrefix: 'icon-symbol',
							type: 'icon-symbol-tool-05',
						}"
					/>
					<uni-list-item
						:border="false"
						title="官方客服"
						show-arrow
						show-extra-icon
						:extra-icon="{
							customPrefix: 'icon-symbol',
							type: 'icon-symbol-tool-06',
						}"
					/>
					<uni-list-item
						:border="false"
						title="设置"
						show-arrow
						show-extra-icon
						:extra-icon="{
							customPrefix: 'icon-symbol',
							type: 'icon-symbol-tool-07',
						}"
					/>
				</uni-list>
			</custom-section>
			<!-- 退出登录 -->
			<view @click="onLogoutClick" class="logout-button">退出登录</view>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
